<template>
  <transition name="drawer">
    <div class="scorllBox" v-if="showDrawer">
      <div class="drawer">
        <div class="primary-retract" @click="setDrawer(false)" @mouseover="hidChidren">
          <span>收</span>
          <span>起</span>
          <span class="white"
            ><el-icon color="#409eff" size="10"><ArrowRight /></el-icon
          ></span>
        </div>
        <div class="drawer-content" v-loading="loading">
          <div class="drawer-left">
            <CrmNavigation
              :leftValue="leftValue"
              :selectTag="selectTag"
              @setSelectTag="setSelectTag"
            />
          </div>
          <div class="drawer-right">
            <component
              :is="detailCompent"
              :id="detailsId"
              :selectTag="selectTag"
              :nowIds="nowIds"
              :moduleOption="moduleOption"
              @setDrawer="setDrawer"
              @refreshData="emit('getPage')"
            />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import CrmNavigation from './Navigation.vue'

import ClueDetails from '@/views/crm/clue/detail/newIndex.vue'
import CustomerDetails from '@/views/crm/customer/detail/newIndex.vue'
import ContactDetails from '@/views/crm/contact/detail/newIndex.vue'
import BusinessDetails from '@/views/crm/business/detail/newIndex.vue'
import ContractDetails from '@/views/crm/contract/detail/newIndex.vue'
import ReceivableDetails from '@/views/crm/receivable/detail/newIndex.vue'
import ReceivablePlanDetails from '@/views/crm/receivable/plan/detail/newIndex.vue'
import ProductDetails from '@/views/crm/product/detail/newIndex.vue'
import OtherType from '@/views/crm/otherType/index.vue'
import * as CrmModuleApi from '@/api/crm/module'

const detailCompent = ref()
const showDrawer = ref(false)
const loading = ref(false)
const detailsId = ref('')

const emit = defineEmits(['getPage'])
const leftValue = ref([])
const selectTag = ref(0)
const leftMap = {
  clue: [
    {
      label: '活动',
      id: 0
    },
    {
      label: '详细资料',
      id: 1
    },
    {
      label: 'AI摘要',
      id: 4
    },
    {
      label: '团队成员',
      id: 2
    },
    // {
    //   label: '广告信息',
    //   id: 5
    // },
    {
      label: '操作日志',
      id: 3
    }
  ],
  customer: [
    {
      label: '活动',
      id: 0
    },
    {
      label: '详细资料',
      id: 1
    },
    {
      label: 'AI摘要',
      id: 11
    },
    {
      label: '联系人',
      id: 2
    },
    {
      label: '团队成员',
      id: 3
    },
    {
      label: '商机',
      id: 5
    },
    {
      label: '合同',
      id: 6
    },
    {
      label: '回款',
      id: 7
    },
    {
      label: '回款计划',
      id: 9
    },
    {
      label: '企微记录',
      id: 8
    },
    {
      label: '操作日志',
      id: 10
    }
  ],
  contact: [
    {
      label: '活动',
      id: 0
    },
    {
      label: '详细资料',
      id: 1
    },
    {
      label: '团队成员',
      id: 2
    },
    {
      label: '商机',
      id: 3
    },
    {
      label: '操作日志',
      id: 4
    }
  ],
  business: [
    {
      label: '活动',
      id: 0
    },
    {
      label: '详细资料',
      id: 1
    },
    {
      label: '联系人',
      id: 2
    },
    {
      label: '产品',
      id: 3
    },
    {
      label: '合同',
      id: 4
    },
    {
      label: '团队成员',
      id: 5
    },
    {
      label: '操作日志',
      id: 6
    }
  ],
  contract: [
    {
      label: '活动',
      id: 0
    },
    {
      label: '详细资料',
      id: 1
    },
    {
      label: '产品',
      id: 2
    },
    {
      label: '回款',
      id: 3
    },
    {
      label: '回款计划',
      id: 6
    },
    {
      label: '团队成员',
      id: 4
    },
    {
      label: '操作日志',
      id: 5
    }
  ],
  receivable: [
    {
      label: '详细资料',
      id: 0
    },
    {
      label: '团队成员',
      id: 1
    },
    {
      label: '操作日志',
      id: 2
    }
  ],
  receivablePlan: [
    {
      label: '详细资料',
      id: 0
    },
    {
      label: '团队成员',
      id: 1
    },
    {
      label: '操作日志',
      id: 2
    }
  ],
  product: [
    {
      label: '详细资料',
      id: 0
    },
    {
      label: '操作日志',
      id: 1
    }
  ],
  other: [
    {
      label: '详细资料',
      id: 0
    }
  ]
}
const setSelectTag = (val) => {
  selectTag.value = val
}
const getComponentName = {
  clue: ClueDetails,
  customer: CustomerDetails,
  contact: ContactDetails,
  business: BusinessDetails,
  contract: ContractDetails,
  receivable: ReceivableDetails,
  receivablePlan: ReceivablePlanDetails,
  product: ProductDetails,
  other: OtherType
}
const moduleOption = ref([])
const nowIds = ref([])
// 显示/隐藏
const setDrawer = async (val, type, id, arr) => {
  if (type == 'clue' || type == 'customer') moduleOption.value = await CrmModuleApi.getModuleList()
  showDrawer.value = val
  detailsId.value = id || ''
  leftValue.value = leftMap[type]
  nowIds.value = arr
  detailCompent.value = getComponentName[type]
  selectTag.value = 0
}
defineExpose({ setDrawer })
</script>

<style scoped lang="scss">
.scorllBox {
  position: fixed;
  bottom: -1px;
  right: 0;
  width: 75%;
  // height: calc(100% - 46px);
  height: calc(100% - 86px);
  overflow: hidden;
  z-index: 9;
  box-shadow: 5px 5px 5px #888888;
  .drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    z-index: 999;
    .primary-retract {
      width: 40px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0052cc;
      color: #fff;
      border-radius: 4px 0 0 4px;
      margin-top: 20%;
      font-size: 13px;
      .white {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 5px;
      }
    }
    :deep(.drawer-content) {
      width: 100%;
      background-color: #f4f9fc;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
      display: flex;
      height: calc(100% - 12px);
      padding-top: 12px;
      overflow: hidden;
      .drawer-left {
        width: 104px;
      }
      .drawer-right {
        width: calc(100% - 104px);
        height: 100%;
        overflow-y: auto;
      }
      .drawer-right::-webkit-scrollbar {
        width: 6px; /* 滚动条宽度 */
      }

      .drawer-right::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* 轨道背景色 */
        border-radius: 3px; /* 轨道圆角 */
      }

      .drawer-right::-webkit-scrollbar-thumb {
        background-color: #ebecf0; /* 滑块颜色 */
        border-radius: 3px; /* 滑块圆角 */
      }

      .drawer-right::-webkit-scrollbar-thumb:hover {
        background-color: #ebecf0; /* 悬停时滑块颜色 */
      }
    }
  }
}
.drawer-enter-active,
.drawer-leave-active {
  transition: transform 0.8s ease-out;
}
.drawer-enter-from,
.drawer-leave-to {
  transform: translateX(100%);
}
.container {
  z-index: 1;
  position: relative;
  flex: 1 1;
  background-color: #fff;
  /*f5f7f9*/
}
.rightPhone {
  width: 300px;
  margin-left: 10px;
  background-color: #fff;
}
</style>
